Ext.define('HelloWorld.view.Index',{
        extend:'Ext.tab.Panel',
        xtype:'helloworld_index',
        required:[
        'Ext.Toolbar'
        ],
        config:{
                layout: {
                        type: 'card',
                        animation: {
                                type: 'flip'
                        }
                },                
                tabBarPosition:'bottom',
                items:[
                {
                        id:'index1',
                        title:'Home',
                        iconCls:'home',
                        styleHtmlContent:true,
                        scrollable:true,
                        items:[
                        {
                                xtype:'titlebar',
                                docked:'top',
                                title:'Title Bar'
                        },
                        {
                                xtype:'button',
                                text:'Hello Button 2'
                        } ,                       
{
                                xtype:'dataview',
                                scrollable: {
                                        direction: 'vertical'
                                },                               
                                store:{
                                        fields:['name','age'],
                                        data:[
                                        {
                                                name: 'Jamie Avins',  
                                                age: 100
                                        },

                                        {
                                                name: 'Rob Dougan',   
                                                age: 21
                                        },

                                        {
                                                name: 'Tommy Maintz', 
                                                age: 24
                                        },

                                        {
                                                name: 'Jacky Nguyen', 
                                                age: 24
                                        },

                                        {
                                                name: 'Ed Spencer',   
                                                age: 26
                                        },

                                        {
                                                name: 'Ivan Jouikov', 
                                                age: 26
                                        }
                                        ]      
                                },
                                itemTpl:'{name} is {age} years old'
                        }
                        ]
                },
                {
                        title:'Setting',
                        iconCls:'action',
                        items:[
                        {
                                xtype:'button',
                                docked:'top',
                                text:'Hello Button'
                        }
                        ]
                },
                {
                        title:'Form',
                        iconCls:'action',
                        items:[
                        {
                                xtype:'button',
                                docked:'top',
                                text:'Hello Button',
                                id: 'helloBtn123',
                                handler:function(){
                                        var panel = Ext.getCmp('Ajax');

                                        panel.getParent().setMasked({
                                                xtype: 'loadmask',
                                                message: 'Loading...'
                                        });

                                        Ext.Ajax.request({
                                                url: 'test.json',
                                                success: function(response) {
                                                        panel.setHtml(response.responseText);
                                                        panel.getParent().unmask();
                                                }
                                        });
                                }
                        } , 
                        {
                                xtype: 'panel',
                                id: 'Ajax',
                                styleHtmlContent: true
                        },
                        ]
                }
                       
                ]
        }
});


